<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="../static/js/echarts.min.js" charset="UTF-8"></script>
    <script src="../static/js/jquery.min.js" charset="UTF-8"></script>
    <link href="/static/css/reset.css"  type="text/css" rel="stylesheet">
    <style>
        table {
      margin: 0 auto;
      width: 50%;
      text-align: center;
    }
    th, td {
      border: 1px solid #dddddd;
      padding: 8px;
    }
    th {
      background-color: #f2f2f2;}
    </style>
</head>

<body>
    <a href="index.html">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-reply-all" viewBox="0 0 16 16">
            <path d="M8.098 5.013a.144.144 0 0 1 .202.134V6.3a.5.5 0 0 0 .5.5c.667 0 2.013.005 3.3.822.984.624 1.99 1.76 2.595 3.876-1.02-.983-2.185-1.516-3.205-1.799a8.74 8.74 0 0 0-1.921-.306 7.404 7.404 0 0 0-.798.008h-.013l-.005.001h-.001L8.8 9.9l-.05-.498a.5.5 0 0 0-.45.498v1.153c0 .108-.11.176-.202.134L4.114 8.254a.502.502 0 0 0-.042-.028.147.147 0 0 1 0-.252.497.497 0 0 0 .042-.028l3.984-2.933zM9.3 10.386c.068 0 .143.003.223.006.434.02 1.034.086 1.7.271 1.326.368 2.896 1.202 3.94 3.08a.5.5 0 0 0 .933-.305c-.464-3.71-1.886-5.662-3.46-6.66-1.245-.79-2.527-.942-3.336-.971v-.66a1.144 1.144 0 0 0-1.767-.96l-3.994 2.94a1.147 1.147 0 0 0 0 1.946l3.994 2.94a1.144 1.144 0 0 0 1.767-.96v-.667z"></path>
            <path d="M5.232 4.293a.5.5 0 0 0-.7-.106L.54 7.127a1.147 1.147 0 0 0 0 1.946l3.994 2.94a.5.5 0 1 0 .593-.805L1.114 8.254a.503.503 0 0 0-.042-.028.147.147 0 0 1 0-.252.5.5 0 0 0 .042-.028l4.012-2.954a.5.5 0 0 0 .106-.699z"></path>
        </svg>
    </a>
    <br>
    <br>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="season" style="width: 1400px;height:300px;"></div>
    <script type="text/javascript" style="text-align: center;" charset="UTF-8">
        $.getJSON("static/data/season.json", d => {
            console.log(d);

            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('season'), 'light');

            var dataAxis = d.map(v => parseInt(v[1]));
            var data = d.map(v => v[0]);

            option = {
                title: {
                    text: '各季节销售次数统计图',
                    x: 'center',
                    //bottom: 10
                    padding: [10, 15, 15, 15]
                },
                color: ['#3398DB'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '15%',
                    right: '15%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'value',
                        data: dataAxis,
                        axisTick: {
                            show: true,
                            alignWithLabel: true,
                            interval: 0
                        },
                        axisLabel: {
                            interval: 0,
                            rotate: 45,
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'category',
                        nameLocation: 'middle',
                        nameGap: 50,
                        data: data
                    }
                ],
                series: [
                    {
                        name: 'season',
                        type: 'bar',
                        barWidth: '60%',
                        data: dataAxis
                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);

        })
    </script>
    <br>
    <br>
    <table>
    <tr>
      <th>Season</th>
      <th>Sales(次)</th>
    </tr>
    <tr>
      <td>autumn</td>
      <td>259992</td>
    </tr>
    <tr>
      <td>winter</td>
      <td>216563</td>
    </tr>
    <tr>
      <td>summer</td>
      <td>208247</td>
    </tr>
    <tr>
      <td>spring</td>
      <td>193701</td>
    </tr>
  </table>
</body>
</html>
